<template>
	<view>
		<view class="mask" v-show="isShow" @tap="hidden"></view>
		<view class="page-add-wrap-list" v-show="isShow">
			<view class="add_user" hover-class="active" @tap="addClick">
				<view class="icon iconfont icon-sousuo-copy"></view>
				<view class="add_user_name">加好友</view>
			</view>
			<view class="add_user" hover-class="active" @tap="addClick1">
				<view class="icon iconfont icon-sousuo-copy"></view>
				<view class="add_user_name">清除未读</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:['isShow'],
		data() {
			return {
				
			}
		},
		methods: {
			addClick() {
				this.$emit('addUserClick')
			},
			addClick1() {
				this.$emit('clearClick')
			},
			hidden() {
				this.$emit('hiddenBtn')
			}
			
		}
	}
</script>

<style lang="less"scoped>
.mask {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	z-index: 5;
}
.page-add-wrap-list {
	height: 160rpx;
	width: 300rpx;
	box-shadow: 4px 2px 5px 5px #cccccc;
	position: fixed;
	right: 0; 
	top: 0;
	background-color: #fff;
	z-index: 9;
	.add_user {
		display: flex;
		height: 80rpx;
		align-items: center;
		justify-content: flex-start;
		overflow: hidden;
		.icon {
			padding: 0 15rpx;
		}
		.add_user_name {
			font-size: 25rpx;
		}
	}
}
.active {
	background-color: #cccccc;
}
</style>
